<template>
  <n-collapse arrow-placement="right" :default-expanded-names="props.isCollapseSearch ? ['1'] : null">
    <n-collapse-item :title="$t(props.title)" name="1">
      <CustomForm
        :submit-text="props.submitText"
        :cancel-text="props.cancelText"
        :model="props.formModel"
        :list="formList"
        @handle-submit="() => emit('handle-submit')"
        @handle-cancel="() => emit('handle-cancel')"
      />
    </n-collapse-item>
  </n-collapse>
</template>

<script setup lang="ts" generic="M extends { [x: string]: any }, F extends { [x: string]: any }">
import { FormInputList } from '@/types/interface'

interface Props {
  title?: string
  isCollapseSearch?: boolean
  formList: FormInputList<F>
  formModel: M
  submitText?: string
  cancelText?: string
  span?: number
}

const props = withDefaults(defineProps<Props>(), {
  title: 'common.search',
  isCollapseSearch: true,
  span: 6,
  submitText: 'common.submit',
  cancelText: 'common.cancel',
  rules: undefined,
})

const emit = defineEmits<{
  (e: 'handle-cancel'): void
  (e: 'handle-submit'): void
}>()
</script>

<style scoped lang="less">
/* 样式可以根据需要进行调整 */
</style>
